UI Builder

05.08.2011 Permalink

Textuelle Beschreibung von Web oder Rich Client UI Masken ist auf den ersten Blick eine unnatürliche Idee. Immerhin müsste sich doch wenigstens derjenige Teil unserer Software, bei dem es auf das gute Aussehen ankommt, ideal graphisch erstellen lassen. Graphische UI Builder sind eine Klasse von Werkzeugen, die genau das ermöglichen. Softwarentwickler müssen den UI Code nicht von Hand schreiben, sondern können ihn WYSIWYG bequem zusammenklicken, sie verwenden scheinbar eine graphische DSL. Seit kurzem gibt es unter Eclipse sogar ein brauchbares freies Plugin: WindowBuilder.

Da ich momentan als Architekt den Bau eines Rich Client vorbereite, habe ich mir WindowBuilder genauer angesehen... und war eigentlich zufrieden. Allerdings nervt mich die Mausschubserei und das zeitraubende, teilweise redundante Eintragen von Werten in den Eigenschaftsfeldern der Widgets. Einen Eindruck davon vermittelt folgendes Beispiel:

Eclipse WindowBuilder (ca. 3:30 Minuten):

Ein wenig Recherche nach weniger mauslastigen Alternativen ließ mich auf Swing JavaBuilder, den Groovy Swing Builder und Scala GUI stoßen, alles Ansätze, den Aufbau von Rich Client Masken mittels textueller statt graphischer DSL zu beschreiben, so dass die Schmerzen der teilweise extrem umständlichen Swing API gelindert werden.

Was ich für ein ausgewachsenes Stück Enterprise GUI aber eigentlich von einem Tooling obendrauf bekommen möchte ist:

Verwendung von Defaults, so dass alle Masken einheitlich aussehen.
Konfiguration des Databinding, d.h. der automatische Abgleich zwischen Inhalten der Widgets und der angebundenen Modellobjekte.
Anbindung von Aktionsmethoden, die in von der UI getrennten Controller-Klassen liegen.
Vorrichtung für die Darstellung von Validierungsfehlern.

Am Ende des Tages habe ich mich daher für eine eigene externe DSL auf Basis von Xtext entschieden, an die ein handgeschriebener Generator angeschlossen wird. Mit ein wenig zusätzlichem Library Code, dessen Aufruf durch den Generator direkt in der View platziert wird, entsteht ein mächtiges Werkzeug. Die Arbeit mit diesem neuen Werkzeug sieht dann wie folgt aus:

Xtext basierte UI Language (ca. 1:30 Minuten)

Interessanterweise wird bei besseren Layout Managern jenseits der JDK eigenen (z.B. JGoodies Form Layout oder MiGLayout) auch für das Layout Management eine DSL verwendet. Die kurzen Anweisungen lassen sich direkt in die UI Language einbetten und werden -- ggf. unter Anreicherung mit Defaults -- in die generierte View geschrieben.

Das Ergebnis ist eine Sprache, mit der sich in -- gefühlt -- einem Drittel der Zeit eine größere Wirkung erzielen lässt als mit Klicken und Ziehen in einem graphischen UI Builder. Die Entwicklung der Grammatik und des Generators nimmt bei guten Kenntnissen der Rich Client API (SWT, Swing, GWT) ca. 1-2 Wochen in Anspruch. Der Break-Even dürfte dann bei unter 50 Masken liegen, eine Menge die bei Enterprise Systemen leicht erreicht wird.

Bye bye, mühsames "Code Zusammenklicken"...